<template>
   <RouterView></RouterView>
   <van-tabbar v-model="active">
      <van-tabbar-item v-for="(item,index) in tabbarItems" :key="index" :name="item.name" :icon="item.icon">{{ item.text }}</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref,watch } from "vue";
import { RouterView, useRouter,useRoute } from "vue-router";
const route = useRoute()
const router = useRouter();

// 记录当前选择的 tab
const active = ref(route.name as string);


const tabbarItems = [
  {
    name: "home",
    icon: "home-o",
    text: "首页",
  },
  {
    name: "order",
    icon: "search",
    text: "订单",
  },
  {
    name: "mine",
    icon: "friends-o",
    text: "我的",
  },
];

watch(active,(to)=>{
  router.push({
    name: to,
  });
})


</script>

<style lang="less" scoped></style>
